<template>
  <uni-popup ref="popup" type="bottom" @change="change">
    <view class="cart-popup">
      <view class="header">
        <view class="order-type">
          <view class="font-weight-bold">优惠券</view>
        </view>
      </view>
      <view class="ut" style="width: 100%">
        <u-tabs
          :lineColor="`transparent`"
          :activeStyle="{
            color: '#fe0203',
            fontWeight: 'bold',
          }"
          :list="m_list"
          :scrollable="false"
          :current="curIdx"
          @click="onTabClick"
        />
      </view>
      <scroll-view scroll-y class="content">
        <view
          class="goods-container"
          v-if="(curIdx == 0 ? ccu : ccnu).length > 0"
        >
          <view
            v-for="(coupon, _index) in curIdx == 0 ? ccu : ccnu"
            :key="_index"
          >
            <view
              class="coupon"
              :style="{
                marginBottom: curIdx == 0 ? `8px` : 0,
              }"
            >
              <view class="l">
                <view
                  class="lbl"
                  :class="{
                    bgr: true,
                  }"
                  >{{ coupon.FClassName }}</view
                >
                <view class="v">
                  <text
                    class="sb"
                    :class="{
                      cr: true,
                    }"
                    >￥</text
                  ><text
                    class="vl"
                    :class="{
                      cr: true,
                    }"
                    >{{ coupon.FValue }}</text
                  >
                </view>
                <view
                  class="m"
                  :class="{
                    cr: true,
                  }"
                >
                  满{{ coupon.FMinValue }}元可用
                </view>
              </view>
              <view class="r">
                <view class="rl">
                  <view class="t">
                    {{ coupon.FName }}
                  </view>
                  <view
                    class="d"
                    :class="{
                      cr: true,
                    }"
                  >
                    {{ formatTime(coupon.FEndTime) + "失效" }}
                  </view>
                </view>
                <view class="rr">
                  <view
                    v-if="curIdx == 0 && cid != coupon.FCouponID"
                    class="btn"
                    v-on:tap="useC(_index)"
                  >
                    使用
                  </view>
                  <view
                    v-if="curIdx == 0 && cid == coupon.FCouponID"
                    style="
                      position: absolute;
                      right: 0;
                      top: 0;
                      width: 0;
                      height: 0;
                      border-top: 15px solid #fe0203;
                      border-right: 15px solid #fe0203;
                      border-bottom: 15px solid transparent;
                      border-left: 15px solid transparent;
                    "
                  ></view>
                  <view
                    v-if="curIdx == 0 && cid == coupon.FCouponID"
                    style="
                      position: absolute;
                      right: 0;
                      top: 0;
                      width: 18px;
                      height: 18px;
                      line-height: 18px;
                      text-align: center;
                      color: #fff;
                    "
                    >√</view
                  >
                </view>
              </view>
            </view>
            <view
              v-if="curIdx != 0"
              style="
                margin-left: 8px;
                margin-right: 8px;
                margin-bottom: 8px;
                border-radius: 8px;
                background-color: #fff;
                color: #fc933c;
                font-size: 13px;
                padding: 5px 7px;
              "
            >
              不可用原因：{{ coupon.cr }}
            </view>
          </view>
        </view>
        <view v-if="curIdx == 0 && ccu.length > 0">
          <view
            class="btn"
            style="
              background-color: #fff;
              color: #fe0203;
              text-align: center;
              height: 45px;
              line-height: 45px;
              margin: 8px;
              border-radius: 8px;
            "
            v-on:tap="n"
          >
            不使用优惠券
          </view>
        </view>
        <view
          class="none"
          style="
            display: flex;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          "
          v-if="(curIdx == 0 ? ccu : ccnu).length == 0"
        >
          <image
            src="/static/images/order/default_img_order.png"
            style="width: 200px"
            mode="widthFix"
          />
          <view>暂无优惠券</view>
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script>
import { getCurrentInstance, ref } from "@vue/composition-api";
import { uToast } from "../../utils/uniUtils";

export default {
  props: {
    ccu: {
      type: Array,
      default: (() => [])().valueOf(),
    },
    ccnu: {
      type: Array,
      default: (() => [])().valueOf(),
    },
    cid: {
      type: Number,
      required: true,
    },
  },

  setup(props, context) {
    const { proxy } = getCurrentInstance();
    const m_list = ref([
      {
        name: "可用优惠券",
        value: 0,
      },
      {
        name: "不可用优惠券",
        value: 1,
      },
    ]);

    const curIdx = ref(0);

    function formatTime(dt) {
      const date = new Date(dt);
      const formattedDateTime = `${date.getFullYear()}-${String(
        date.getMonth() + 1
      ).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")} ${String(
        date.getHours()
      ).padStart(2, "0")}:${String(date.getMinutes()).padStart(
        2,
        "0"
      )}:${String(date.getSeconds()).padStart(2, "0")}`;

      return formattedDateTime;
    }

    function onTabClick(item) {
      curIdx.value = item.value;
    }

    function useC(idx) {
      context.emit("onCidChange", props.ccu[idx].FItemID);
      uToast("选择成功！");
      proxy.close();
    }

    return {
      m_list,
      formatTime,
      onTabClick,
      curIdx,
      useC,
    };
  },
  methods: {
    open() {
      this.$refs.popup.open();
    },

    close() {
      this.$refs["popup"].close();
    },

    change({ show }) {
      if (!show) {
        this.curIdx = 0;
      }
      this.$emit("change", show);
    },
    n() {
      this.$emit("onCidChange", 0);
      this.close();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/li_mixins.scss";

.cart-popup {
  background-color: #efeff4;
  // padding-bottom: 80px;
  width: 100%;
}

.header {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1rpx solid rgba($color: #c8c7cc, $alpha: 0.6);
  font-size: 24rpx;
  color: #777;

  .order-type {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #343434;
    font-weight: bold;

    .extra {
      margin-right: 10rpx;
      border: 2rpx solid #e0a32d;
      font-size: 18rpx;
      padding: 2rpx 10rpx;
      color: #e0a32d;
      margin-left: 10rpx;
    }
  }

  .delete-btn {
    width: 46rpx;
    height: 46rpx;
    margin-right: 10rpx;
  }
}

.content {
  height: calc(100vh - 250px);
  padding-bottom: 10px;

  .goods-container {
    width: 100%;
    padding: 5px 0 0 0;
  }

  .list {
    display: flex;
    flex-direction: column;
    margin-bottom: 30rpx;

    .item {
      display: flex;
      align-items: stretch;
      padding: 30rpx 0;
      position: relative;

      .left {
        flex-shrink: 0;
        display: flex;
        align-items: center;

        .image {
          width: 110rpx;
          height: 110rpx;
        }
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 28rpx;
        color: #343434;
        margin-left: 10rpx;

        .name-and-materials {
          display: flex;
          flex-direction: column;
          margin-bottom: 20rpx;

          .name {
            font-weight: bold;
            font-size: 30rpx;
          }

          .materials {
            font-size: 24rpx;
            color: #777;
          }
        }

        .price-and-actions {
          display: flex;
          justify-content: space-between;

          .price {
            color: #ec3e40;
          }
        }
      }
    }
  }
}

// 必选
.required-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  & > view {
    line-height: 50rpx;
  }
}

// 数字
.num-btn {
  display: flex;
  min-width: 150rpx;
  justify-content: space-between;

  .add-btn,
  .minus-btn {
    width: 44rpx;
    height: 44rpx;
  }

  .number {
    font-size: 30rpx;
    width: 1.3rem;
    height: 1.3rem;
    line-height: 1.3rem;
    text-align: center;
    border-radius: 100%;
  }
}
// 删除线
.isVip {
  text-decoration: line-through;
}

.wrapper {
  height: auto;

  .menu-item {
    padding: 30rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    color: #333;
    overflow: hidden;

    &:nth-last-child(1) {
      margin-bottom: 100rpx;
    }

    .image {
      width: 50rpx;
      height: 50rpx;
    }

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.active {
      background-color: #ffffff;
      color: #000;
      font-weight: 600 !important;
      border-left: 8rpx solid #e4304d;
    }
  }
}

.products {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}

.product {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  position: relative;
  .mask {
    width: 540rpx;
    height: 170rpx;
    background: rgba(17, 17, 17, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .image {
    width: 170rpx;
    height: 170rpx;
    margin-right: 10rpx;
    flex-shrink: 0;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170rpx;
    flex: 1;

    .name {
      font-size: 34rpx;
      font-weight: 600;
      width: 360rpx;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
      -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
      line-clamp: 2; /** 显示的行数 **/
      overflow: hidden; /** 隐藏超出的内容 **/
    }

    .labels {
      display: flex;
      font-size: 20rpx;
      margin-bottom: 8rpx;
      overflow: hidden;
      flex-wrap: wrap;
      .label {
        max-width: 40%;
        padding: 6rpx 10rpx;
        margin-right: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .description {
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
      color: #777;
      font-size: 24rpx;
    }

    .price {
      font-size: 34rpx;
      color: #ec3e40;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .symbol {
        font-size: 20rpx;
      }
    }
  }
}

.btn-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  .btn {
    height: 40px;
    width: 100%;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    background-color: #ff2838;
    line-height: 40px;
    text-align: center;
  }
}

$li-hot: #fe2021;
$li-gray: #989898;
.cr {
  color: $li-hot;
}

.cg {
  color: $li-gray;
}
.coupon {
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
  height: 100px;
  @include flex-start;
  $li-radius: 8px;

  .l {
    background-color: #fff;
    width: 25%;
    border-right: 1px dashed #f5f5f5;
    border-radius: $li-radius;
    position: relative;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 0;

    .lbl {
      position: absolute;
      left: 0;
      top: 0;
      width: 70px;
      height: 20px;
      font-size: 13px;
      color: #fff;
      &.bgr {
        background-color: #fe8f81;
      }
      &.bgg {
        background-color: $li-gray;
      }

      border-top-left-radius: $li-radius;
      border-bottom-right-radius: $li-radius;
      text-align: center;
      line-height: 20px;
    }
    .v {
      font-weight: bold;
      .sb {
        font-size: 12px;
      }
      .vl {
        font-size: 25px;
      }
    }

    .m {
      font-size: 12px;
    }
  }

  .r {
    flex: 1;
    background-color: #fff;
    border-radius: $li-radius;
    overflow: hidden;
    @include flex-start;
    .rl {
      display: flex;
      flex: 2;
      flex-direction: column;
      padding: 20px 0;
      justify-content: space-between;
      .t {
        font-weight: bold;
        text-indent: 3px;
      }
      .d {
        font-size: 12px;
        text-indent: 3px;
      }
    }
    .rr {
      flex: 1;
      @include flex-center;
      position: relative;
      .btn {
        color: $li-hot;
        border: 1px solid $li-hot;
        padding: 3px 14px;
        font-size: 13px;
        border-radius: 12px;
      }
      .oc {
        position: absolute;
        right: -8px;
        top: -8px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        color: $li-gray;
        border: 1px solid $li-gray;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate(-45deg);
        .ic {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          border: 1px dashed $li-gray;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 13px;
        }
      }
    }
  }
}
</style>
